@import '../custom.less';
@import './vars.less';

@selected-box-prefix-cls: ~'@{css-prefix}selected-box';

.@{selected-box-prefix-cls} {
  .inject-SelectedBox-vars();

  height: 100%;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: var(--tv-SelectedBox-header-height) auto;
  background-color: var(--tv-SelectedBox-bg-color);
  font-size: var(--tv-SelectedBox-font-size);
  line-height: var(--tv-SelectedBox-line-height);
  color: var(--ti-selected-text-color);

  .@{selected-box-prefix-cls}__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--tv-SelectedBox-header-padding);
    border-bottom: var(--tv-SelectedBox-header-border);
    height: var(--tv-SelectedBox-header-height);

    .@{selected-box-prefix-cls}__header-select {
      max-width: 8rem;

      .@{selected-box-prefix-cls}__header-select-label {
        cursor: pointer;
      }
    }

    .@{selected-box-prefix-cls}__header-right {
      display: flex;
      user-select: none;
      color: var(--tv-SelectedBox-text-color-clear);

      > :not([hidden]) ~ :not([hidden]) {
        margin-right: 0;
        margin-left: 0.5rem;
      }

      .@{selected-box-prefix-cls}__header-right-label {
        cursor: pointer;
      }
    }
  }

  .@{selected-box-prefix-cls}__list {
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--tv-SelectedBox-list-padding);

    .@{selected-box-prefix-cls}__item {
      cursor: pointer;
      padding: var(--tv-SelectedBox-item-padding);

      &:hover {
        background-color: var(--tv-SelectedBox-bg-color-hover);
      }

      .@{selected-box-prefix-cls}__item-grid {
        display: grid;
        grid-template-columns: auto var(--tv-SelectedBox-item-right-width);

        .@{selected-box-prefix-cls}__item-grid-left {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          .@{selected-box-prefix-cls}__item-grid-left-label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .@{selected-box-prefix-cls}__item-grid-left-label-pri {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              position: relative;
            }
          }

          .@{selected-box-prefix-cls}__item-grid-left-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .@{selected-box-prefix-cls}__item-grid-left-text-aux {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: var(--tv-SelectedBox-item-aux-text-color);
              position: relative;
            }
          }
        }

        .@{selected-box-prefix-cls}__item-grid-right {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          fill: var(--tv-SelectedBox-icon-color);
          height: var(--tv-SelectedBox-item-right-height);

          .tiny-svg {
            font-size: var(--tv-SelectedBox-icon-size);
          }

          &:hover {
            fill: var(--tv-SelectedBox-icon-color-hover);
          }
        }
      }
    }

    &-empty {
      text-align: center;
      color: var(--tv-SelectedBox-text-color-empty);

      > div {
        margin-top: 50%;
      }
    }
  }

  .@{selected-box-prefix-cls}__list--inverse {
    text-decoration-line: line-through;
    text-decoration-style: solid;
    text-decoration-color: var(--tv-SelectedBox-text-color);
  }

  .@{selected-box-prefix-cls}__popover {
    display: none;
  }
}
